<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css">
	</head>
	<body>
		<form class="layui-form" style="padding-top: 30px;text-align:center;" id="complain_search">
		<div class="layui-form-item">
		    <div class="layui-inline">
		        <input type="text" name="no" required  lay-verify="required" placeholder="请输入台区编号或供电所编号" 
				autocomplete="off" class="layui-input" style="width: 300px;" id="no">
		    </div>
			<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
			  <input type="text" class="layui-input" id="date" name="date">
			</div>
			<div class="layui-inline">
				<button id="search" class="layui-btn" lay-submit
						lay-filter="provinceSearch">查找</button>
			</div>
			<div class="layui-inline" style="display: none" id="testDiv2"> <!-- 注意：这一层元素并不是必须的 -->
				<a class="layui-btn"  href="" download id="update">下载结果</a>
				<a class="layui-btn"  href="" download id="update2">下载补点后结果</a>
			</div>
			<div class="layui-inline" style="display: none" id="testDiv3"> <!-- 注意：这一层元素并不是必须的 -->
				<button type="button" class="layui-btn" onclick="show()">查看折线图</button>
			</div>
			<div class="layui-inline" style="display: none" id="testDiv5"> <!-- 注意：这一层元素并不是必须的 -->
				<button type="button" class="layui-btn" onclick="showTable()">查看表格</button>
			</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">选择：</label>
				    <div class="layui-input-block">
				      <input type="radio" name="noType"  value="tgNo" title="台区编号" checked>
				      <input type="radio" name="noType" value="orgNo" title="供电所编号">
				    </div>
			</div>
			<div class="layui-inline">
				<select name="index" lay-verify="required" id="index">
					<option value="1">请选择时间间隔</option>
					<option value="1">15分钟</option>
					<option value="4">1小时</option>
					<option value="8">2小时</option>
					<option value="12">3小时</option>
				</select>
			</div>
		</form>
		<div style="display: none;padding-top: 30px;text-align:center;" id="testDiv4">
			<div id="main"  style="width: 1500px;height:700px;"></div>
		</div>
		<div style="display: none" id="testDiv">
			<table class="layui-hide" id="test" ></table>
		</div>
		<script src="js/jquery-3.4.1.js"></script>
		<script src="layui/layui.js"></script>
		<script src="js/echarts.min.js"></script>
		<script type="text/javascript">

			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option;
			var name ="";
			var array = [];
			var array2 = [];
			var data96 = ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30', '01:45',
				'02:00', '02:15', '02:30', '02:45', '03:00', '03:15', '03:30', '03:45',
				'04:00', '04:15', '04:30', '04:45', '05:00', '05:15', '05:30', '05:45',
				'06:00', '06:15', '06:30', '06:45', '07:00', '07:15', '07:30', '07:45',
				'08:00', '08:15', '08:30', '08:45', '09:00', '09:15', '09:30', '09:45',
				'10:00', '10:15', '10:30', '10:45', '11:00', '11:15', '11:30', '11:45',
				'12:00', '12:15', '12:30', '12:45', '13:00', '13:15', '13:30', '13:45',
				'14:00', '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45',
				'16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45',
				'18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45',
				'20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45',
				'22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45'];
			var data24=['00:00','01:00', '02:00', '03:00', '04:00','05:00',
				'06:00','07:00', '08:00','09:00', '10:00','11:00', '12:00', '13:00',
				'14:00','15:00','16:00', '17:00', '18:00', '19:00',
				'20:00', '21:00', '22:00', '23:00'];
			var data12=['00:00','02:00','04:00', '06:00', '08:00', '10:00','12:00',
				'14:00','16:00','18:00', '20:00', '22:00'];
			var dataTime=[];

			layui.use(['laydate', 'form','table'],function(){
				var form = layui.form;
				var laydate = layui.laydate;
				var table = layui.table;

				//执行一个laydate实例
				laydate.render({
					elem: '#date' ,//指定元素
					value:new Date()
					,min: -10
					,max:0
				});
				table.render({
					id:"testReload"
					,elem: '#test'
					,url:'ele/queryTgOrg'
					,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
					,cols: [[
						{field:'rid',title: '数据ID'}
						,{field:'consNo',title: '用户编号'}
						,{field:'consName',title: '用户名称'}
						,{field:'areaName',title: '区域'}
						,{field:'tFactor', title: '倍率'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
						,{field:'eventTime', title: '时间', sort: true}
						,{field:'papR', title: '正向有功总能示值', sort: true}
						,{field:'papRDiff', title: '正向有功总能示值差值'}
						,{field:'ele',title: '电量', sort: true}
						,{field:'ua', title: 'ua'}
						,{field:'ub', title: 'ub'}
						,{field:'uc',title: 'uc'}
						,{field:'ia', title: 'ia'}
						,{field:'ib', title: 'ib'}
						,{field:'ic',title: 'ic'}
						,{field:'i0',title: 'i0'}
						,{field:'p',title: 'p'}
						,{field:'pa', title: 'pa'}
						,{field:'pb', title: 'pb'}
						,{field:'pc',title: 'pc'}
						,{field:'q',title: 'q'}
						,{field:'qa', title: 'qa'}
						,{field:'qb', title: 'qb'}
						,{field:'qc',title: 'qc'}
						,{field:'tgName',title: '台区名称'}
						,{field:'orgName',title: '供电所名称'}
					]]
					,page:true
					,limit:10
				});

				form.render();
				form.on('submit(provinceSearch)', function(data) {
					$("#testDiv2").css("display","none");
					$("#testDiv3").css("display","none");
					$("#testDiv4").css("display","none");
					$("#testDiv5").css("display","none");
					var traget=document.getElementById("testDiv");
					traget.style.display="";
					var formData = data.field;
					var no = formData.no;
					var date = formData.date;
					var noType = $("input[name='noType']:checked").val();
					var index = $("#index").val();
					var tgNo = "";
					var orgNo = "";
					if(noType == "tgNo"){
						tgNo = no;
					}else{
						orgNo = no;
					}
					table.reload('testReload', {
						where: {
							tgNo:tgNo,
							orgNo:orgNo,
							date:date,//2021-04-01
							index:index
						},
						url: 'ele/queryTgOrg',
						method: 'post',
                        done:function (res) {
                            $("#testDiv").css("display","");
							$("#testDiv2").css("display","");
							$("#testDiv3").css("display","");
                            console.log(res.msg);
                            $("#update").attr("href",res.msg[0]);
							$("#update2").attr("href",res.msg[1]);
							array=res.msg[2];
							array2=res.msg[3];
							name = res.msg[4];
							if(index == 1){
								dataTime=[].concat(data96);
							}else if(index == 4){
								dataTime=[].concat(data24);
							}else{
								dataTime=[].concat(data12);
							}
                        }
					});
					return false;
				});


			});
			function showTable() {
				$("#testDiv3").css("display","");
				$("#testDiv5").css("display","none");
				$("#testDiv").css("display","");
				$("#testDiv4").css("display","none");
			}
			function show(){
				$("#testDiv").css("display","none");
				$("#testDiv3").css("display","none");
				$("#testDiv4").css("display","");
				$("#testDiv5").css("display","");
				option = {
					title: {
						text: name,
						x:'center',
						y: 'top'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['考核表电量', '用户表电量'],
						top:'30'
					},
					toolbox: {
						show: true,
						feature: {
							dataZoom: {
								yAxisIndex: 'none'
							},
							dataView: {readOnly: false},
							magicType: {type: ['line', 'bar']},
							restore: {},
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: dataTime
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value}'
						}
					},
					series: [
						{
							name: '考核表电量',
							type: 'line',
							data: array2
						},
						{
							name: '用户表电量',
							type: 'line',
							data: array
						}
					]
				};
				myChart.setOption(option);
			}
		</script>
	</body>
</html>
